import { AddRoleApi } from "@/api/role";
import { PlusOutlined } from "@ant-design/icons";
import { ModalForm, ProForm, ProFormDateRangePicker, ProFormSelect, ProFormText ,ProFormColorPicker} from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import { Button, Form, message } from "antd";

 const RoleData = () => {
    const [form] = Form.useForm<{ label: string; value: string,color:string }>();
    const addUsers = useRequest(AddRoleApi,{
        manual:true,
        onSuccess:(res)=>{
            console.log(res);
            
        }
    })
    return (
        <div>
            <ModalForm<{
                label: string;
                 value: string,
                  color:string
            }>
                title="新建角色"
                trigger={
                    <Button type="primary">
                        <PlusOutlined />
                        新建角色
                    </Button>
                }
                width={300}
                form={form}
                autoFocusFirstInput
                modalProps={{
                    destroyOnClose: true,
                    onCancel: () => console.log('run'),
                }}
                onFinish={async (values) => {
                    addUsers.run(values.label,Number(values.value),values.color)
                    message.success('提交成功');
                    return true;
                }}
            >
                <ProFormText width="sm" name="label" label="角色名称" />
                <ProFormText
                    name="value"
                    label="角色等级"
                    width='sm'
                />
                <ProFormColorPicker
                    width="xs"
                    name="color"
                    label="选择颜色"
                    
                />
            </ModalForm>
        </div>
    )
}

export default RoleData